<template>
	<view>
		<view class="level_my">
			<view class="level_my-conter">
				<image style="width: 100%" src="@/static/imgs/huyuan-to.png" mode=""></image>
				<view class="my_top">
					<image src="@/static/imgs/user-list.png" mode=""></image>
					<view class="info">
						<text>HI,12312312</text>
					</view>
				</view>
				<view class="my_left">
					<view class="my_left_img">
						<view class="my_left_img_teont">
							<text style="font-size: 55px; font-weight: bold">V</text>
							<text > {{ $store.getters.userInfo.user.level }}</text>
						</view>
					</view>
					<view class="my_left-bot">
						<view class="jifen">
							<text style="margin-right: 2.5px">
								{{$store.getters.userInfo.totalRechargeAmount}}</text>
              {{ $t("grade.g0") }}
						</view>
						<view style="margin-right: 15px">{{$t("grade.g1")}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nameqq">
			<view class="level_info_title">
				<text class="title_text1">{{$t("grade.g2")}}</text>
				<text class="title_text1 title_text2">{{$t("grade.g3")}}</text>
				<text class="title_text1 title_text3">{{$t("grade.g4")}}</text>
			</view>
			<!-- name autoCondition  yield -->
			<view class="level_info_title" v-for="(item, index) in list" :key="index" :style="{ backgroundColor: index % 2 !== 0 ? '#f6f5f6' : '#fff' }">
				<text class="title_text1">{{ item.name }}</text>
				<text class="title_text1 title_text2">{{ item.yield }}%</text>
				<text class="title_text1 title_text3">{{ item.autoCondition }}</text>
			</view>
		</view>
		<view style="height: 100px;">
			
		</view>
		<FooterNav :modelKey="5" />
	</view>
</template>
<script>
import FooterNav from '@/components/footer-nav/footer-nav.vue';

import { levelList } from '@/api/index.js';
export default {
	components: {
		FooterNav
	},
	props: {},
	data() {
		return {
			list: [
				{
					lv: 'VPI0',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI1',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI2',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI3',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI4',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI5',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI6',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI7',
					JF: '0',
					JX: '0.000'
				},
				{
					lv: 'VPI8',
					JF: '0',
					JX: '0.000'
				}
			]
		};
	},
	watch: {},
	computed: {},
	onShow() {
		this.init();
	},
	methods: {
	 	async init() {
			let res = await levelList();
			this.list = res.data
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background-color: rgb(255, 255, 255);
}
.level_my {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: auto;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-bottom: 80px;
	.my_top {
		position: absolute;
		left: 50%;
		top: 35px;
		margin-left: -37.5px;
		image {
			width: 75px;
			height: 75px;
			border-radius: 100%;
		}
		.info {
			display: flex;
			flex-direction: column;
			color: #fff;
			margin-top: 5px;
		}
	}
	.my_left {
		font-size: 12px;
		font-family: PingFang;
		color: #333;
		position: absolute;
		top: 100px;
		height: 175px;
		width: 90%;
		left: 50%;
		margin-left: -45%;
		border-radius: 10px;
		text-align: center;
		margin-top: 50px;
		background-image: linear-gradient(90deg, #cba85b, #f6ead0);
		.my_left_img {
			position: absolute;
			right: 25px;
			top: 20px;
			.my_left_img_teont {
				top: -40px;
				width: 50px;
				height: 50px;
				display: block;
				color: rgb(205, 165, 105);
				font-size: 28px;
			}
		}
	}
	.my_left-bot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 10px;
		width: 100%;
		font-weight: 600;
		.jifen {
			font-size: 17px;
			margin-left: 15px;
			font-weight: 600;
		}
	}
}
.nameqq {
	padding: 10px;
	.level_info_title {
		background: rgb(246, 245, 246);
		color: rgb(0, 0, 0);
		border-radius: 8px 8px 0px 0px;
		overflow: hidden;
		font-size: 14px;
		line-height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title_text1 {
			flex: 1 1 0%;
			text-align: center;
			font-weight: bold;
			border-top: 1px solid #f1f1f1;
			border-left: 1px solid #f1f1f1;
		}
		.title_text2 {
			flex: 1 1 0%;
			text-align: center;
			font-weight: bold;
			border-top: 1px solid #f1f1f1;
			border-left: 1px solid #f1f1f1;
		}
		.title_text3 {
			flex: 1 1 0%;
			text-align: center;
			font-weight: bold;
			border-right: 1px solid #f1f1f1;
			border-top: 1px solid #f1f1f1;
			border-left: 1px solid #f1f1f1;
		}
	}
}
</style>
